<template>
  <!-- Start 左侧导航  -->
  <el-col :span="4">
    <!-- Start 菜单配置 -->
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo left-menu"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- End 菜单配置 -->
      <el-menu-item index="1" @click="chose('用户管理', '/admin/user')">
        <i class="el-icon-menu"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="2" @click="chose('角色管理', '/admin/role')">
        <i class="el-icon-setting"></i>
        <span slot="title">角色管理</span>
      </el-menu-item>

      <el-menu-item index="3" @click="chose('权限管理', '/admin/perm')">
        <i class="el-icon-setting"></i>
        <span slot="title">权限管理</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <!-- End 左侧导航-->
</template>

<script>
export default {
  name: "Sidebar",
  data() {
    return {};
  },
  props: ['editableTabs', 'addTabAndChose'],
  methods: {
    // 选择标签
    chose(tabName, tagPath) {
      // 定位到标签
      var tab = this.editableTabs.filter((tab) => tab.name === tabName);
      if (tab && tab.length == 1 && tab[0].path === tagPath) {
        this.editableTabsValue = tabName;
        tab = tab[0];
        // 设置路由
        this.$router.push({
          path: tab.path,
          query: {
            size: 5,
            p: 1,
          },
        });
      } else {
        this.addTabAndChose(tabName, tagPath, true);
      }
    },
  },
};
</script>

<style scoped>
.left-menu {
  height: 95vh;
}
</style>